<template>
	<!-- 商品卡片 -->
	<view>
		<scroll-view scroll-x class="tabList">
			<view class="tabList-box ss-flex">
				<view :class="['tabList-item',{'tabList-item-active':props.data.tabIndex == index}]" 
					v-for="(item,index) in props.data.tabData" :key="item.name" @tap="setTab(index)">
					{{item.name}}
				</view>
				<view class="tabList-line" :style="{transform : `translateX(${props.data.tabIndex * 85}px)`}"></view>
			</view>
		</scroll-view>
		<!-- 1 100%宽卡片列表-->
		<view v-if="Tmp.mode === 1 && state.goodsList.length" class="goods-sl-box">
			<view class="goods-box" v-for="item in state.goodsList" :key="item.id"
				:style="[{ marginBottom: data.space * 2 + 'rpx' }]">
				<s-goods-column class="" size="sl" :goodsFields="Tmp.goodsFields" :tagStyle="Tmp.tagStyle" :data="item"
					:titleColor="Tmp.goodsFields.title?.color" :subTitleColor="Tmp.goodsFields.subtitle.color"
					:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
					@click="sheep.$router.go('/pages/goods/index', { id: item.id })">
					<template v-slot:cart>
						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
							{{ Tmp.buyNowStyle.mode === 1 ? Tmp.buyNowStyle.text : '' }}
						</button>
					</template>
				</s-goods-column>
			</view>
		</view>

		<!-- 2   双列瀑布流列表-->
		<view v-if="Tmp.mode === 2 && state.goodsList.length" class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top">
			<view class="goods-list-box">
				<view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
					v-for="item in state.leftGoodsList" :key="item.id">
					<s-goods-column class="goods-md-box" size="md" :goodsFields="Tmp.goodsFields" :tagStyle="Tmp.tagStyle"
						:data="item" :titleColor="Tmp.goodsFields.title?.color" :subTitleColor="Tmp.goodsFields.subtitle.color"
						:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
						:titleWidth="330 - marginLeft - marginRight"
						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
						@getHeight="mountMasonry($event, 'left')">
						<template v-slot:cart>
							<button class="ss-reset-button cart-btn" :style="[buyStyle]">
								{{ Tmp.buyNowStyle.mode === 1 ? Tmp.buyNowStyle.text : '' }}
							</button>
						</template>
					</s-goods-column>
				</view>
			</view>
			<view class="goods-list-box">
				<view class="right-list" :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
					v-for="item in state.rightGoodsList" :key="item.id">
					<s-goods-column class="goods-md-box" size="md" :goodsFields="Tmp.goodsFields" :tagStyle="Tmp.tagStyle"
						:data="item" :titleColor="Tmp.goodsFields.title?.color" :subTitleColor="Tmp.goodsFields.subtitle.color"
						:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
						:titleWidth="330 - marginLeft - marginRight"
						@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
						@getHeight="mountMasonry($event, 'right')">
						<template v-slot:cart>
							<button class="ss-reset-button cart-btn" :style="[buyStyle]">
								{{ Tmp.buyNowStyle.mode === 1 ? Tmp.buyNowStyle.text : '' }}
							</button>
						</template>
					</s-goods-column>
				</view>
			</view>
		</view>

		<!-- 3  30%卡片列表-->
		<view v-if="Tmp.mode === 3 && state.goodsList.length" class="goods-lg-box">
			<view class="goods-box" :style="[{ marginBottom: data.space + 'px' }]" v-for="item in state.goodsList"
				:key="item.id">
				<s-goods-column class="goods-card" size="lg" :goodsFields="Tmp.goodsFields" :data="item"
					:tagStyle="Tmp.tagStyle" :titleColor="Tmp.goodsFields.title?.color"
					:subTitleColor="Tmp.goodsFields.subtitle.color" :topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom"
					@tap="sheep.$router.go('/pages/goods/index', { id: item.id })">
					<template v-slot:cart>
						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
							{{ Tmp.buyNowStyle.mode === 1 ? Tmp.buyNowStyle.text : '' }}
						</button>
					</template>
				</s-goods-column>
			</view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 商品模板，装修商品卡片
	 * @description style 1:带tab 2：瀑布流，横向两个，上图下内容 3：大图，横向一个
	 */
	import {
		computed,
		reactive,
		onMounted
	} from 'vue';
	import sheep from '@/sheep';
	import { onReachBottom ,onPullDownRefresh} from '@dcloudio/uni-app'
	const state = reactive({
		isLoading:false,
		surplus:'more',
		pages:0,
		goodsIds:[],
		goodsList: [],
		leftGoodsList: [],
		rightGoodsList: [],
	});
	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
		styles: {
			type: Object,
			default () {},
		},
	});

	const Tmp =  computed(()=>props.data.templateList[props.data.tabIndex]||{})
	// const {
	// 	mode,
	// 	tagStyle,
	// 	buyNowStyle,
	// 	goodsFields,
	// 	goodsIds
	// } = Tmp.value ?? {};
	const {
		marginLeft,
		marginRight
	} = props.styles ?? {};
	onReachBottom(()=>{
		if(state.surplus == 'no-more') return uni.showToast({
			title:'没有更多了',
			icon:'none'
		 })
		if(!state.isLoading){
			state.pages+=1
			getGoodsList()
		}
	})
	async function getGoodsListByIds(ids) {
		let {
			data
		} = await sheep.$api.goods.ids({
			ids
		});
		return data;
	}
	onPullDownRefresh(()=>{
		setTab(0)
	})
	function setTab(index){
		if(props.data.tabIndex != index){
			state.surplus = 'more'
			state.isLoading=false
			state.pages=0
			props.data.tabIndex = index
			state.goodsList = []
			state.leftGoodsList = []
			state.rightGoodsList = []
			count = 0;
			leftHeight = 0;
			rightHeight = 0;
			getGoodsList()
		}
	}
	onMounted(() => {
		getGoodsList()
	});
	async function getGoodsList(){
		if(state.isLoading)return
		state.isLoading=true
		let ids = Tmp.value.goodsIds.slice( state.pages*6 , (state.pages + 1)*6)
		if(ids.length==0){
			 state.surplus = 'no-more'
			 return
		}
		let list = await getGoodsListByIds(ids.join(','));
		state.isLoading=false
		state.goodsList.push(...list)
	
		if (Tmp.value.mode === 2) {
			mountMasonry();
		}
	}
	// 加载瀑布流
	let count = 0;
	let leftHeight = 0;
	let rightHeight = 0;

	function mountMasonry(height = 0, where = 'left') {
		if (where === 'left') leftHeight += height;
		if (where === 'right') rightHeight += height;
		if (!state.goodsList[count]) return;
		if (leftHeight <= rightHeight) {
			state.leftGoodsList.push(state.goodsList[count]);
		} else {
			state.rightGoodsList.push(state.goodsList[count]);
		}
		count++;
	}

	// 购买按钮样式
	const buyStyle = computed(() => {
		if (Tmp.value.buyNowStyle.mode == 1) {
			// button
			return {
				background: `linear-gradient(to right, ${Tmp.value.buyNowStyle.color1}, ${Tmp.value.buyNowStyle.color2})`,
			};
		}

		if (Tmp.value.buyNowStyle.mode == 2) {
			// image
			return {
				width: '54rpx',
				height: '54rpx',
				background: `url(${sheep.$url.cdn(Tmp.value.buyNowStyle.src)}) no-repeat`,
				backgroundSize: '100% 100%',
			};
		}
	});
</script>

<style lang="scss" scoped>
	.goods-md-wrap {
		width: 100%;
	}
	
	
	.tabList{
		height: 40px;
		margin-bottom: 8px;
		.tabList-box{
			position: relative;
			height: 40px;
		}
		.tabList-item{
			height: 40px;
			width: 85px;
			line-height: 40px;
			text-align: center;
			min-width: 85px;
			font-size: 15px;
			color: #666666;
			transition: 0.2s;

			&-active{
				font-size: 18px !important;
				color: #333333 !important;
				font-weight: 600;
			}
		}
		.tabList-line{
			position: absolute;
			width: 22px;
			height: 3px;
			border-radius: 4px;
			background: #E96977;
			left: calc((85px - 22px)/2);
			transition: 0.3s;
			bottom: 5px;
			
		}
	}
	.goods-list-box {
		width: 50%;
		box-sizing: border-box;

		.left-list {
			&:nth-last-child(1) {
				margin-bottom: 0 !important;
			}
		}

		.right-list {
			&:nth-last-child(1) {
				margin-bottom: 0 !important;
			}
		}
	}

	.goods-box {
		&:nth-last-of-type(1) {
			margin-bottom: 0 !important;
		}
	}

	.goods-md-box,
	.goods-sl-box,
	.goods-lg-box {
		position: relative;

		.cart-btn {
			position: absolute;
			bottom: 18rpx;
			right: 20rpx;
			z-index: 11;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 20rpx;
			border-radius: 25rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}
</style>